import React, { useState } from "react";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import HeaderContent from "../../components/Header";
import { routes } from "../../router";
import { Link, Navigate, Outlet } from "react-router-dom";

const { Content, Footer, Sider, Header } = Layout;

// 生成菜单项
const menuItems = routes
  .filter((route) => !route.meta?.hideMenu)
  .map((route) => ({
    key: route.path,
    icon: route.meta?.icon,
    label: <Link to={route.path}>{route.meta?.title}</Link>,
    children: route.children
      ?.filter((child) => !child.meta?.hideMenu)
      .map((child) => ({
        key: child.path,
        icon: child.meta?.icon,
        label: <Link to={child.path}>{child.meta?.title}</Link>,
      })),
  }));

const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div style={{ height: "50px" }}>
          <img
            src="https://ww2.sinaimg.cn/mw690/007ut4Uhly1hx4v37mpxcj30u017cgrv.jpg"
            alt="Logo"
            style={{ height: "100%", width: "100%" }}
          />
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={["2"]}
          mode="inline"
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header style={{ backgroundColor: "#fff" }}>
          <HeaderContent></HeaderContent>
        </Header>
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb
            style={{ margin: "16px 0" }}
            items={[{ title: "User" }, { title: "Bill" }]}
          />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Home;
